<template>
  <div id="ContactUs">

    <div class="container">
      <div class="left-box">
        <div class="company">恒泰实业</div>
        <div class="en-name">
          Avertex International Limited.
        </div>
        <div class="company2">
          Director/Chairman:
          <span class="wenben">Jerry Wang &nbsp; / &nbsp; Lily Liu</span>
        </div>
        <div class="contactus">Phone/Wechat:<span class="wenben">+86 13450781369</span></div>
        <div class="number">Contact Number:<span class="wenben">0086-18998298610&nbsp;/&nbsp;0086-13450781369</span></div>
        <div class="email">EMAIL:<span class="wenben">jerrywang@usedloom.com<br/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lilyliu@usedloom.com</span></div>
<!--        <div class="url">URL<span class="wenben">www.sfjiosfojskfpfsj.com</span></div>-->
        <div class="address">ADDRESS：<div class="wenben">Room 604, Poly Finacial Center, Xintang District, Guangzhou City, China</div></div>
        <div class="codewechat">
          <img src="/qrcode_facebook.png" alt="Facebook QR Code" @click="openModal()"/>
        </div>

        <!-- 模态框 -->
        <div id="modal" class="modal" @click="closeModal()">
          <img id="modal-image" src="" alt="Big QR Code"/>
        </div>
<!--        <div class="codeoffical"><img src="/二维码.png"/></div>-->
<!--        <div class="wechat">Company WeChat</div>-->
        <div class="wechat">Official account</div>
      </div>
      <div class="right-box">
        <p  class="scope">Scope of services: </p>
        <p>-Purchase of machinery and machinery Park</p>
        <p>-Relocation services</p>
        <p>-Textile machinery inspection</p>
        <p>-Machine, machinery Park disassembly service</p>
        <p>-Transport services</p>
<!--        <p>-</p>-->
<!--        <p>Guangzhou office Address :</p>-->
<!--        <p>Room 428,NO27 Fuqian Rd,XintangTown,Zengcheng District, Guangzhou,China</p>-->
<!--        <p>-</p>-->
<!--        <p>Shanghai office Address :-->
<!--        </p>-->
<!--        <p>Room 602, Building 9, No. 125 Laiting South Road, Songjiang District, Shanghai, China</p>-->
        <div class="hongkong"></div>
        <div class="guangzhou"></div>
        <div class="shanghai"></div>
      </div>
    </div>
  </div>
</template>
<script setup name="ContactUs">
function openModal() {
  var img = event.target;  // 获取点击的图片
  var modal = document.getElementById('modal');
  var modalImg = document.getElementById('modal-image');

  modalImg.src = img.src;  // 设置模态框的图片为点击的图片
  modal.style.display = "flex";  // 显示模态框
}

function closeModal() {
  var modal = document.getElementById('modal');
  modal.style.display = "none";  // 关闭模态框
}
</script>

<style scoped>
html {
  scroll-behavior: smooth;
}
#ContactUs {

  width: 100%;
  display: flex;

  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  gap: 10px;

}
/* 模态框样式 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal img {
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  display: block;
}
.container {
  height: 400px;
  width: 100%;
  display: flex;
  margin: 30px;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;

  .left-box {
    position: relative;
    padding: 20px;
    width: 1056px;
    height: 400px;
    background: #FFFFFF;
    border: 1px solid #D3D3D3;
    border-right: none; /* 取消右边框 */
  }

  .right-box {
    width: 553px;
    height: 400px;
    background: #2F9AE3;
    border: 1px solid #D3D3D3;
    border-left: none; /* 取消左边框 */
  }
}

.company {
  font-family: PingFangSC, PingFang SC;
  font-weight: normal;
  font-size: 26px;
  color: #2F9AE3;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.company2,
.contactus,
.number ,
.email,
.url,
.address{
  margin: 10px;
  font-family: PingFangSC, PingFang SC;
  font-weight: normal;
  font-size: 14px;
  color: #999999;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.wenben{
  margin-left: 40px;
  width: 300px;

  font-family: PingFangSC, PingFang SC;
  font-weight: bolder;
  font-size: 16px;
  color: #636363;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.codeoffical,.codewechat{
  position: absolute;
  width: 100px;
  height: 100px;
  right:150px;
}
.codeoffical img, .codewechat img {
  width: 100%; /* 图片宽度为容器宽度 */
  height: 100%; /* 图片高度为容器高度 */
  object-fit: contain; /* 保持图片等比例缩放 */
}
.codewechat{
  top:60px;
}

.codeoffical{
  top:200px;

}

.wechat,.offical{
  position: absolute;


}
.wechat{
  right:30px;
  top:96px;
}
.offical{
  right:46px;
  top:236px;
}

p{
  margin-top: 10px;
  padding-left: 10px;
  font-family: PingFangSC;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 20px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
.scope{
  font-weight: bolder;
  font-size: 25px;
}
.en-name
{
  font-family: PingFangSC, PingFang SC;
  font-weight: normal;
  font-size: 14px;
  color: #D5D5D5;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
/* 对小屏设备进行缩放 */
@media screen and (max-width: 768px) {
  //transform: scale(0.6);
  #ContactUs {
    width: 100%;
    display: flex;

    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    gap: 10px;

  }
  /* 模态框样式 */
  .modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .modal img {
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    display: block;
  }
  .container {
    height: 400px;
    width: 400px;
    display: flex;
    margin: 30px;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;

    .left-box {
      position: relative;
      padding: 20px;
      width: 80%;
      height: 200px;
      background: #FFFFFF;
      border: 1px solid #D3D3D3;
      border-right: none; /* 取消右边框 */
    }

    .right-box {
      width: 20%;
      height: 200px;
      background: #2F9AE3;
      border: 1px solid #D3D3D3;
      border-left: none; /* 取消左边框 */
    }
  }

  .company {
    font-family: PingFangSC, PingFang SC;
    font-weight: normal;
    font-size: 9px;
    color: #2F9AE3;
    line-height: 9px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .en-name
  {
    font-family: PingFangSC, PingFang SC;
    font-weight: normal;
    font-size: 6px;
    color: #D5D5D5;
    line-height: 9px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .company2,
  .contactus,
  .number ,
  .email,
  .url,
  .address{
    margin: 6px;
    font-family: PingFangSC, PingFang SC;
    font-weight: normal;
    font-size: 6px;
    color: #999999;
    line-height: 9px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .wenben{
    margin-left: 6px;
    width: 240px;
    font-family: PingFangSC, PingFang SC;
    font-weight: bolder;
    font-size: 8px;
    color: #636363;
    line-height: 9px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .codeoffical,.codewechat{
    position: absolute;
    width: 0px;
    height: 0px;
    right:150px;
  }
  .codeoffical img, .codewechat img {
    width: 0%; /* 图片宽度为容器宽度 */
    height: 0%; /* 图片高度为容器高度 */
    object-fit: contain; /* 保持图片等比例缩放 */
  }
  .codewechat{
    top:60px;
  }

  .codeoffical{
    top:200px;

  }

  .wechat,.offical{
    position: absolute;


  }
  .wechat{
    right:30px;
    top:96px;
    color:white;
  }
  .offical{
    right:46px;
    top:236px;
  }

  p{
    margin-top: 0px;
    padding-left: 10px;
    font-family: PingFangSC;
    font-size: 6px;
    color: #FFFFFF;
    line-height: 9px;
    text-align: left;
    font-style: normal;
    text-transform: none;

  }
  .scope{
    font-size: 8px;
    line-height: 15px;
  }
}
</style>

